<template>
	<view class="pageTemplate">
		<image :src="config.baseurl + item" class="infoImg" mode="widthFix" v-for="item of companyInfo.imgs" :key="item"
			@click="lookDetails(config.baseurl + item)"></image>

		<!-- 轮播信息 -->
		<view class="swipperBox" v-if="companyInfo.swippers && companyInfo.swippers.length > 0">
			<view class="swipperTitle">品质实力保障</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item of companyInfo.swippers" :key="item">
					<image class="swipperImg" :src="config.baseurl + item" mode=""
						@click="lookDetails(config.baseurl + item)">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 弹窗显示图片详情 -->
		<view class="wxMask" v-show="isShowDetails" @click.stop="closeDetails">
			<movable-area class="movableBox" scale-area>
				<movable-view class="movableBox" direction="all" scale scale-min="0.5" scale-max="4"
					:x="offsetX" :y="offsetY"
					@touchend="onTouchEnd" @touchmove="onTouchMove" out-of-bounds>
					<view class="imgDetailBox">
						<image :src="detailsImgUrl" class="detailsImg" mode="widthFix"></image>
					</view>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	import {
		getCompanyInfo
	} from "@/api";
	import config from "@/config";

	export default {
		data() {
			return {
				config,
				companyInfo: {
					imgs: []
				},

				autoplay: true,
				indicatorDots: true,
				interval: 2000,
				detailsImgUrl: undefined,
				isShowDetails: false,
				isScaling: false,
				lastTouchTime: 0,
			};
		},
		methods: {
			// 双指缩放中标记状态
			onTouchMove(e) {
				if (e.touches.length >= 2) this.isScaling = true;
			},
			// 缩放结束
			onTouchEnd(e) {
				console.log("缩放结束")
				// if (now - this.lastTouchTime < 300 && !this.isScaling) {
				// 	this.closeDetails(); // 执行关闭
				// }
				const timer = setTimeout(() => {
					this.isScaling = false; // 重置状态
					clearTimeout(timer)
				}, 300);
			},

			// 查看图片详情
			lookDetails(url) {
				console.log("进入预览", url);
				this.detailsImgUrl = url;
				this.isShowDetails = true;
			},
			closeDetails() {
				if (!this.isScaling) {
					this.detailsImgUrl = undefined;
					this.isShowDetails = false;
				}
			},
			dogetCompanyInfo() {
				getCompanyInfo().then(res => {
					console.log(res);
					this.companyInfo = res.data;
				})
			}
		},
		onLoad(options) {
			console.log("options", options);
			this.dogetCompanyInfo();
		}
	}
</script>

<style lang="less">
	.swipperBox {
		width: 100%;
		// height: 300upx;
		margin-top: 10upx;
		padding-bottom: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: ce;

		.swipperTitle {
			width: 100%;
			text-align: center;
			background: url("https://dkzs.site/cardApi/upload/assets/titleBorder.png") no-repeat;
			background-size: 293upx;
			background-position: bottom center;
			line-height: 80upx;
			font-weight: bold;
			font-size: 36upx;
		}

		.swiper {
			margin-top: 35upx;
			width: 700upx;
			height: 428upx;

			.swipperImg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.wxMask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.movableBox {
			width: 100%;
			height: 80%;
		}

		.imgDetailBox {
			width: 100%;
			height: 100%%;
			overflow: auto;
			// displa;
			text-align: center;

			.detailsImg {
				// min-width: 700upx;
				width: 100%;
			}
		}

		.content {
			width: 80%;
			height: 800upx;
			background-color: #fff;
			border-radius: 16upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;
			box-sizing: border-box;

			.name,
			.companyName {
				margin-top: 50upx;
				font-size: 32upx;
			}

			.companyName {
				font-size: 28upx;
				color: #aaa;
			}

			.infoText {
				margin-top: 180upx;
				font-size: 28upx;
				color: #aaa;
			}

			.copyBtn {
				width: 300upx;
				border-radius: 20upx;
				margin-top: 40upx;
				background-color: transparent;
				border: 1px solid #c7000a;
				color: #c7000a;
				font-size: 30upx;
			}
		}
	}

	.infoImg {
		width: 100%;
	}
</style>